<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本操作页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        textarea {
            width: 100%;
            height: 200px;
            padding: 10px;
            margin-bottom: 10px;
            font-size: 16px;
            box-sizing: border-box;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            margin-right: 10px;
        }
        .button-container {
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
<textarea id="text-content" placeholder="请输入内容..."></textarea>
<div class="button-container">
    <button id="save-btn">提交</button>
    <button id="copy-btn">复制</button>
    <button id="get-btn">获取</button>
</div>

<script>
    const textArea = document.getElementById('text-content');
    const saveButton = document.getElementById('save-btn');
    const copyButton = document.getElementById('copy-btn');
    const getButton = document.getElementById('get-btn');

    // 提交按钮点击事件
    saveButton.addEventListener('click', () => {
        const content = textArea.value.trim();
        if (content === '') {
            alert('请输入内容！');
            return;
        }

        // 使用Fetch API提交内容到后台接口
        fetch('/api/put', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ content }),
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('提交成功！');
            } else {
                alert('提交失败，请重试。');
            }
        })
        .catch(error => {
            console.error('提交失败:', error);
            alert('提交失败，请检查网络或稍后再试。');
        });
    });

    // 复制按钮点击事件
    copyButton.addEventListener('click', () => {
        const content = textArea.value.trim();
        if (content === '') {
            alert('没有内容可复制！');
            return;
        }

        // 复制内容到剪贴板
        navigator.clipboard.writeText(content)
            .then(() => {
                alert('内容已复制到剪贴板！');
            })
            .catch(err => {
                console.error('复制失败:', err);
                alert('复制失败，请手动选择文本并复制。');
            });
    });

    // 获取按钮点击事件
    getButton.addEventListener('click', () => {
        // 使用Fetch API从后台接口获取内容
        fetch('/api/get')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    textArea.value = data.content || '';
                } else {
                    alert('获取数据失败，请重试。');
                }
            })
            .catch(error => {
                console.error('获取数据失败:', error);
                alert('获取数据失败，请检查网络或稍后再试。');
            });
    });
</script>
</body>
</html>